<script setup>
import EditContainer from "@/components/AdminConponents/EditContainer.vue";
import {gameGetAPI, gameRequireEditAPI} from "@/api/AdminApi/game.js";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const route = useRoute()
const gameMinRequire = ref({})
const gameMaxRequire = ref({})
const gameName = ref()

const getGamePriceInfo = async (id = route.params.id) => {
  const res = await gameGetAPI(id)
  gameMinRequire.value = res.data.gameRequire[0]
  gameMaxRequire.value = res.data.gameRequire[1]
  console.log(gameMaxRequire.value)
  gameName.value = res.data.chineseName
}
onMounted(() => getGamePriceInfo())

// 取消按钮
const router = useRouter()
const cancel = () => {
  router.go(-1)
}

const rules = {
  os: [
    { required: true, message: '请输入操作系统名称', trigger: 'blur' }
  ],
  cpu: [
    { required: true, message: '请输入处理器名称', trigger: 'blur' }
  ],
  ram: [
    { required: true, message: '请输入内存容量', trigger: 'blur' }
  ],
  gpu: [
    { required: true, message: '请输入显卡名称', trigger: 'blur' }
  ],
  dx: [
    { required: true, message: '请输入dx版本', trigger: 'blur' }
  ],
  size: [
    { required: true, message: '请输入游戏大小', trigger: 'blur' }
  ]
}

const formRefMin = ref()
const formRefMax = ref()
// 修改按钮
const edit = async (gameRequire) => {
  await formRefMin.value.validate()
  const res = await gameRequireEditAPI(gameRequire)
  if (res.code === 1) {
    ElMessage.success("更新成功")
    router.go(-1)
  } else {
    ElMessage.error(res.msg)
  }
}
</script>

<template>
  <EditContainer :title="`${gameName}游戏分类编辑`">
    <template #body>
      <el-descriptions
          border
          :column="2"
          direction="vertical">
        <el-descriptions-item label="最低配置">
          <el-form ref="formRefMin" :model="gameMinRequire" :rules="rules" label-width="auto">
            <el-form-item label="操作系统" prop="os">
              <el-input v-model="gameMinRequire.os"></el-input>
            </el-form-item>
            <el-form-item label="处理器" prop="cpu">
              <el-input v-model="gameMinRequire.cpu"></el-input>
            </el-form-item>
            <el-form-item label="内存" prop="ram">
              <el-input v-model="gameMinRequire.ram"></el-input>
            </el-form-item>
            <el-form-item label="显卡" prop="gpu">
              <el-input v-model="gameMinRequire.gpu"></el-input>
            </el-form-item>
            <el-form-item label="dx版本" prop="dx">
              <el-input v-model="gameMinRequire.dx"></el-input>
            </el-form-item>
            <el-form-item label="大小" prop="size">
              <el-input v-model="gameMinRequire.size"></el-input>
            </el-form-item>
            <el-button type="primary" @click="edit(gameMinRequire)">修改</el-button>
          </el-form>
        </el-descriptions-item>
        <el-descriptions-item label="最高配置">
          <el-form ref="formRefMax" :model="gameMaxRequire" :rules="rules" label-width="auto">
            <el-form-item label="操作系统" prop="os">
              <el-input v-model="gameMaxRequire.os"></el-input>
            </el-form-item>
            <el-form-item label="处理器" prop="cpu">
              <el-input v-model="gameMaxRequire.cpu"></el-input>
            </el-form-item>
            <el-form-item label="内存" prop="ram">
              <el-input v-model="gameMaxRequire.ram"></el-input>
            </el-form-item>
            <el-form-item label="显卡" prop="gpu">
              <el-input v-model="gameMaxRequire.gpu"></el-input>
            </el-form-item>
            <el-form-item label="dx版本" prop="dx">
              <el-input v-model="gameMaxRequire.dx"></el-input>
            </el-form-item>
            <el-form-item label="大小" prop="size">
              <el-input v-model="gameMaxRequire.size"></el-input>
            </el-form-item>
            <el-button type="primary" @click="edit(gameMaxRequire)">修改</el-button>
          </el-form>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footerLeft>
      <el-button class="button" @click="cancel" type="info">取消</el-button>
    </template>
  </EditContainer>
</template>

<style scoped>

</style>
